<template>
  <el-container class="center-container">
    <el-card class="info-container">
      <h2>员工详情</h2>
      <el-row :gutter="20">
        <el-col :span="12">
          <p><strong>员工ID:</strong> {{ employeeInfo.employeeId }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>姓名:</strong> {{ employeeInfo.name }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>银行账号:</strong> {{ employeeInfo.bankAccount }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>银行卡类型:</strong> {{ employeeInfo.cardType }}</p>
        </el-col>
      </el-row>

      <h2>工资详情</h2>
      <el-row :gutter="20">
        <el-col :span="12">
          <p><strong>基本工资:</strong> {{ salaryInfo.basicSalary }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>奖金:</strong> {{ salaryInfo.bonus }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>个人所得税:</strong> {{ salaryInfo.personalTax }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>国家税:</strong> {{ salaryInfo.nationalTax }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>医疗保险:</strong> {{ salaryInfo.healthInsurance }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>退休保险:</strong> {{ salaryInfo.retirementInsurance }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>净工资:</strong> {{ salaryInfo.netSalary }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>支付日期:</strong> {{ salaryInfo.paymentDate }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>请假天数:</strong> {{ salaryInfo.leaveDays }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>请假扣款:</strong> {{ salaryInfo.leaveDeduction }}</p>
        </el-col>
      </el-row>

      <el-button type="primary" @click="openEditDialog">修改工资</el-button>

      <el-dialog title="修改工资信息" :visible.sync="editDialogVisible">
        <el-form :model="editForm" ref="editForm" label-width="120px">
          <el-form-item label="员工ID">
            <el-input v-model="editForm.employeeId" disabled></el-input>
          </el-form-item>
          <el-form-item label="基本工资" :rules="[{ required: true, message: '请输入基本工资', trigger: 'blur' }]">
            <el-input v-model="editForm.basicSalary" type="number"></el-input>
          </el-form-item>
          <el-form-item label="奖金" :rules="[{ required: true, message: '请输入奖金', trigger: 'blur' }]">
            <el-input v-model="editForm.bonus" type="number"></el-input>
          </el-form-item>
          <el-form-item label="个人所得税" :rules="[{ required: true, message: '请输入个人所得税', trigger: 'blur' }]">
            <el-input v-model="editForm.personalTax" type="number"></el-input>
          </el-form-item>
          <el-form-item label="国家税" :rules="[{ required: true, message: '请输入国家税', trigger: 'blur' }]">
            <el-input v-model="editForm.nationalTax" type="number"></el-input>
          </el-form-item>
          <el-form-item label="医疗保险" :rules="[{ required: true, message: '请输入医疗保险', trigger: 'blur' }]">
            <el-input v-model="editForm.healthInsurance" type="number"></el-input>
          </el-form-item>
          <el-form-item label="退休保险" :rules="[{ required: true, message: '请输入退休保险', trigger: 'blur' }]">
            <el-input v-model="editForm.retirementInsurance" type="number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateSalary">保存</el-button>
            <el-button @click="editDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </el-container>
</template>

<script>
export default {
  props: {
    employeeId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      employeeInfo: {
        employeeId: '',
        name: '',
        bankAccount: '',
        cardType: ''
      },
      salaryInfo: {
        employeeId: '',
        basicSalary: '',
        bonus: '',
        personalTax: '',
        nationalTax: '',
        healthInsurance: '',
        retirementInsurance: '',
        netSalary: '',
        paymentDate: '',
        leaveDays: '',
        leaveDeduction: ''
      },
      editDialogVisible: false,
      editForm: {
        employeeId: '',
        basicSalary: '',
        bonus: '',
        personalTax: '',
        nationalTax: '',
        healthInsurance: '',
        retirementInsurance: ''
      }
    };
  },
  mounted() {
    this.fetchEmployeeInfo();
    this.fetchSalaryInfo();
  },
  methods: {
    async fetchEmployeeInfo() {
      try {
        const response = await this.$axios.get(`/api/employee/${this.employeeId}`);
        this.employeeInfo = response.data;
      } catch (error) {
        console.error('Error fetching employee info:', error);
      }
    },
    async fetchSalaryInfo() {
      try {
        const response = await this.$axios.get(`/api/salary/${this.employeeId}`);
        if (response.data.status === 'success') {
          this.salaryInfo = response.data.salary;
        } else {
          this.$message.error('Error fetching salary info');
        }
      } catch (error) {
        console.error('Error fetching salary info:', error);
      }
    },
    openEditDialog() {
      this.editForm = { ...this.salaryInfo };
      this.editDialogVisible = true;
    },
    async updateSalary() {
      try {
        await this.$refs.editForm.validate();
        const response = await this.$axios.put('/api/salary/update', this.editForm, {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        if (response.data.status === 'success') {
          this.$message.success(response.data.message);
          this.editDialogVisible = false;
          this.fetchSalaryInfo(); // 更新后重新获取工资信息
        } else {
          this.$message.error('更新失败，请重试');
        }
      } catch (error) {
        if (error.response && error.response.data) {
          this.$message.error(error.response.data.message);
        } else {
          this.$message.error('更新失败，请重试');
        }
      }
    }
  }
};
</script>

<style scoped>
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.info-container {
  border: 1px solid #dcdfe6;
  padding: 20px;
  border-radius: 5px;
  background-color: #f9f9f9;
  max-width: 900px;
  width: 100%;
}
.el-table th, .el-table td {
  padding: 8px;
}
</style>
